<template>
    <div class="container">
        <div class="content_wrapper">
            <div class="lyecs-table-list-warp" style="margin-bottom: 0">
                <div class="list-table-tool lyecs-search-warp">
                    <el-form :model="filterParams">
                        <div class="advanced-search-warp list-table-tool-row">
                            <div class="simple-form-warp">
                                <div class="simple-form-field">
                                    <div class="form-group">
                                        <label class="control-label"><span>咨询来源：</span></label>
                                        <div class="control-container">
                                            <el-select v-model="filterParams.user_from" clearable>
                                                <el-option value="" label="全部" />
                                                <el-option value="pc" label="pc" />
                                                <el-option value="h5" label="h5" />
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                                <div class="simple-form-field">
                                    <el-button type="primary" @click="onSearchSubmit">搜索</el-button>
                                </div>
                            </div>
                        </div>
                    </el-form>
                </div>
                <div class="table-container">
                    <a-spin :spinning="loading">
                        <el-table :data="filterState" :loading="loading" :total="total" row-key="brand_id" @sort-change="onSortChange">
                            <el-table-column label="客户" prop="brand_id">
                                <template #default="{ row }">
                                    <div class="kehu">
                                        <el-avatar class="av" :src="imageFormat(row.user.avatar)"></el-avatar>
                                        <div class="title">{{ row.user?.nickname }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="最新两条消息">
                                <template #default="{ row }">
                                    <div class="message-list">
                                        <div class="item" v-for="it in row.userLastTwoMessage.slice(0, 2)">
                                            <StatusDot color="#44bb00" :flicker="false"></StatusDot>
                                            <sapn v-html="it.content.content"></sapn>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="add_time" :width="160" label="进入排队时间"></el-table-column>
                            <el-table-column :width="100" label="排队时长" sortable="custom">
                                <template #default="{ row }">
                                    <RelativeTime :time="row.add_time" />
                                </template>
                            </el-table-column>
                            <el-table-column :width="100" label="咨询来源" prop="user_from" sortable="custom"></el-table-column>
                            <el-table-column :width="120" fixed="right" label="操作">
                                <template #default="{ row }">
                                    <DeleteRecord
                                        title="您确定要接入会话吗？"
                                        :params="{ conversation_id: row.id }"
                                        :requestApi="transferConversation"
                                        @afterDelete="loadFilter"
                                        >接入会话</DeleteRecord
                                    >
                                    <el-divider direction="vertical" />
                                    <DeleteRecord :params="{ conversation_id: row.id }" :requestApi="delBrand" @afterDelete="loadFilter">删除</DeleteRecord>
                                </template>
                            </el-table-column>
                            <template #empty>
                                <div class="empty-warp">
                                    <div v-if="!loading" class="empty-bg">暂无数据</div>
                                </div>
                            </template>
                        </el-table>
                    </a-spin>
                    <div v-if="total > 0" class="pagination-con">
                        <Pagination v-model:page="filterParams.page" v-model:size="filterParams.size" :total="total" @callback="loadFilter" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import "@/style/css/list.less";
import { DialogForm } from "@/components/dialog";
import { PopForm } from "@/components/pop-form";
import { onMounted, reactive, ref } from "vue";
import { DeleteRecord, Pagination, Switch } from "@/components/list";
import { Image } from "@/components/image";
import { message } from "ant-design-vue";
import { useConfigStore } from "@/store/config";
import { QueueListFilterParams, SearchInfoList } from "@/types/im/im";
import { batchSubmit, delBrand, getBrandList, updateBrandField, updateFirstWorld } from "@/api/product/brand";
import { getWaitServantList, transferConversation } from "@/api/im/conversation";
import { imageFormat } from "@/utils/format";
import { RelativeTime } from "@/components/form";
import StatusDot from "@/components/form/src/StatusDot.vue";

const config: any = useConfigStore();
// 基本参数定义
const filterState = ref<SearchInfoList[]>([]);
const loading = ref<boolean>(true);
const total = ref<number>(0);
const selectedIds = ref<number[]>([]);
const filterParams = reactive<QueueListFilterParams>({
    //初使化用于查询的参数
    page: 1,
    size: config.get("page_size"),
    sort_field: "",
    sort_order: "",
    keyword: "",
    first_word: "",
    user_from: ""
});
// 获取列表的查询结果
const loadFilter = async () => {
    loading.value = true;
    try {
        const result = await getWaitServantList({ ...filterParams });
        filterState.value = result.filter_result;
        total.value = result.total;
    } catch (error: any) {
        message.error(error.message);
    } finally {
        loading.value = false;
    }
};
onMounted(() => {
    loadFilter();
});

// 参数查询
const onSearchSubmit = () => {
    loadFilter();
};
// 修改排序
const onSortChange = ({ prop, order }: { prop: string; order?: string }) => {
    filterParams.sort_field = prop;
    filterParams.sort_order = order == "ascending" ? "asc" : order == "descending" ? "desc" : "";
    loadFilter();
};

defineExpose({
    loadFilter
});
</script>
<style lang="less" scoped>
.batch {
    margin-top: 20px;
}

.kehu {
    display: flex;
    align-items: center;
    gap: 8px;
    .av {
        min-width: 40px;
        min-height: 40px;
    }
    .title {
        /* 占满剩余宽度 */
        flex-grow: 1;
        /* 文字不换行 */
        white-space: nowrap;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 超出部分显示为省略号 */
        text-overflow: ellipsis;
    }
}
</style>
